﻿@{
  ViewBag.Title = "Categories";
  Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

<script src="../../../../Scripts/Areas/Admin/Common.js" type="text/javascript"></script>
<script src="../../../../Scripts/Areas/Admin/Categories/Index.js" type="text/javascript"></script>

<div class="row">
  <div class="span12">
    <h2>@ViewBag.Title</h2>
  </div>
</div>
<div class="row">
  <div class="span10">
    <table class="table table-striped table-bordered table-condensed" id="categories">
      <thead>
        <tr>
          @*<th>Id</th>*@
          <th>Name</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody data-bind="template: { name: 'category-template', foreach: categories }"></tbody>
    </table>
  </div>
  <div class="span2">
    <button class="btn btn-primary" data-toggle="modal" data-target="#category">
      <i class="icon-plus icon-white"></i> Add
    </button>
  </div>
</div>
@*<div class="row">
  <div class="span10">
    <blockquote>
      <p>Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. 
        So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.</p>
      <small>Mark Twain</small>
    </blockquote>
  </div>
</div>*@

<script type="text/html" id="category-template">
  <tr>
    @*<td data-bind="text: Id"/>*@
    <td>
      <a data-bind="attr: { href : url }">
        <span data-bind="text: Name" />
      </a>
    </td>
    <td>
      <a href="#" class="btn" data-bind="click: remove">
        <i class="icon-trash"></i>
      </a>
      <a href="#" class="btn" data-bind="click: edit">
        <i class="icon-edit"></i>
      </a>
    </td>
  </tr>
</script>

<div class="modal hide" id="category">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Add Category</h3>
  </div>
  <div class="modal-body">
    <label>Name</label>
    <input type="text" class="span3" placeholder="Category name ..." data-bind="value: name">
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary" data-bind="click: add">Save</a>
  </div>
</div>

<div class="boxMessage alert alert-success" id="itemBoxMessage">
  The item was successfully <span id="verb"></span>
</div>
